<template>
	<view id='goods-item' class="goods-item" :class="[goodsType == 2 ? 'goods-item2':'']">
		<view class="goods-img">
			<base-img :src='item.pic'></base-img>
		</view>
		<view class="goods-info-wrap">
			<template v-if='goodsType == 1'>
				<view class="goods-name">
					{{item.goodname}}
				</view>
				
				<view class="goods-tag">
					<text class="texts">吊牌价</text>
					<text class="money">￥{{item.tag_price}}</text>
				</view>
				<!-- <view class="goods-vip-wrap">
					<view class="goods-vip-price-wrap">
						<view class="vip-icon">
							<image src='/static/vip.png'></image>
						</view>
						<view class="vip-price line_h_center">
							<view class="vip-price-text">￥1230.00</view>
						</view>
					</view>
					<view class="share-wrap line_center" @tap.stop='getPoster'>
						<view class="share-icon">
							<image src='/static/share.png'></image>
						</view>
						<view class="share-text">分享</view>
					</view>
				</view> -->
				<view class="goods-price-wrap">
					<view class="goods-price-con">
						<text style="font-size: 28rpx;">￥</text>
						<view class="goods-price-int">
							{{item.price}}<text style="font-size: 24rpx; color: #999999; margin-left: 5rpx;">/{{item.unit}}</text> 
						</view>
						<!-- <text>{{item.priceObj.floatPrice}}</text> -->
					</view>
					<view class="cart line_center" @tap.stop='handleGoods'>
						<image src='https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/b71a43700a3d110965d9e891e4f16d470bc5f54a.png' class="cart-icon"></image>
					</view>
				</view>
			</template>
			<template v-else>
				
			</template>
		</view>
	</view>
</template>

<script>
	import baseImg from '../base-img/base-img.vue'
	export default {
		name:"goods-item",
		components:{
			baseImg,
		},
		props:{
			item:Object,
			goodsType:{
				type:Number,
				default:1
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			handleGoods(){
				this.$emit('handleGoods')
			},
			getPoster(){
				this.$emit('getPoster')
			}
		}
	}
</script>

<style lang="scss" scoped>
	image{
		width:100%;
		height: 100%;
	}
	.goods-item{
		width: 340rpx;
		// height: 454rpx;
		padding-bottom: 20rpx;
		box-sizing: border-box;
		// border-radius: 20rpx;
		background:$dis-con-color;
		overflow: hidden;
		position: relative;
	}
	.goods-item2{
		height: 500rpx;
	}
	.goods-img{
		width:340rpx;
		height: 334rpx;
	}
	.goods-name{
		// width: 292rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		height: 75rpx;
		margin: 16rpx auto 0;
		color: #333333;
		font-size: 28rpx;
		overflow: hidden;				//溢出内容隐藏
		text-overflow: ellipsis;		//文本溢出部分用省略号表示
		display: -webkit-box;			//特别显示模式
		-webkit-line-clamp: 2;			//行数
		line-clamp: 2;					
		-webkit-box-orient: vertical;

	}
	
	.goods-tag{
		margin: 40rpx 20rpx;
		// border: 2rpx solid #EC1818;
		width: 70%;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		.texts{
			border-radius: 4rpx 0rpx 0rpx 4rpx;
			padding: 7rpx 10rpx;
			box-sizing: border-box;
			color: #fff;
			background-color: #EC1818;
		}
		.money{
			display: flex;
			justify-content: center;
			width: 55%;
			border: 2rpx solid #EC1818;
			color: #EC1818;
			padding: 5rpx 10rpx;
			box-sizing: border-box;
			border-radius: 0rpx 4rpx 4rpx 0rpx;
		}
	}
	.goods-name2{
		margin:14rpx 24rpx 0;
		height: 80rpx;
		line-height: 40rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.goods-vip-wrap{
		width:200%;
		display: flex;
		justify-content: space-between;
		transform: scale(0.5);
		transform-origin: left top;
		margin-top:30rpx;
	}
	.goods-vip-price-wrap{
		display: flex;
		margin-left:48rpx;
		.vip-icon{
			width:84rpx;
			height: 72rpx;
			position: relative;
			z-index: 2;
			flex-shrink: 0;
		}
		.vip-price{
			padding:0 30rpx;
			height: 60rpx;
			background: linear-gradient(90deg, #FEB147 0%, #FEEABB 100%);
			border-radius: 0rpx 28rpx 28rpx 0rpx;
			font-size: 40rpx;
			margin-left:-40rpx;
			position: relative;
			z-index: 1;
			top:4rpx;
			.vip-price-text{
				margin-left:15rpx;
				color:#964301;
				line-height: 60rpx;
			}
		}
	}
	.share-wrap{
		width: 176rpx;
		height: 60rpx;
		background: $dis-font-color;
		border-radius: 28rpx 0 0 28rpx;
		.share-icon{
			width:36rpx;
			height: 36rpx;
		}
		.share-text{
			font-size: 40rpx;
			color:$dis-con-color;
			margin-left:20rpx;
		}
	}
	.goods-price-wrap{
		// margin:0 24rpx;
		width:100%;
		display: flex;
		justify-content: space-between;
		// position: absolute;
		// left:0;
		// bottom: 16rpx;
		margin-top: 20rpx;
		.goods-price-con{
			display: flex;
			align-items: baseline;
			color:$dis-font-color;
			// margin-left: 24rpx;
			padding: 0 16rpx;
			box-sizing: border-box;
			text{
				font-size: 28rpx;
			}
			.goods-price-int{
				font-size: 30rpx;
			}
		}
		.cart{
			width:40rpx;
			height: 40rpx;
			border-radius: 100%;
			// background: $dis-font-color;
			margin-right: 20rpx;
			.cart-icon{
				width: 28rpx;
				height: 28rpx;
			}
		}
	}
	.inter-num{
		display: flex;
		align-items: baseline;
		margin-left:24rpx;
		margin-top:10rpx;
		color:$dis-inter-color;
		.inter-num-icon{
			width: 20rpx;
			height: 20rpx;
			margin-right: 12rpx;
		}
	}
	.duihuan{
		width: 96rpx;
		height: 64rpx;
		background: linear-gradient(128deg, #FFC65E 0%, #FF8E12 100%);
		border-radius: 8rpx;
		font-size: 36rpx;
		transform: scale(0.5);
		transform-origin: left top;
		position: absolute;
		right:-24rpx;
		bottom:-10rpx;
	}

</style>